<template>
  <view class="floor">
    <view class="title">/ {{data.cat_name}} /</view>
    <view class="prodList">
      <navigator :url="`/pages/goods_list/goods_list?cid=${item.cat_id}`" class="item" v-for="item in data.children" :key="item.cat_id">
        <u-image
          class="img"
          width="120"
          height="120"
          :src="item.cat_icon"
          mode=""
        ></u-image>
        <view class="name">{{item.cat_name}}</view>
      </navigator>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      data: {
        type: Object,
        required: true
      }
    }
  };
</script>

<style lang="scss" scoped>
.floor {
  margin-bottom: 40rpx;
}
.title {
  text-align: center;
  font-size: 26rpx;
  color: #575757;
  padding: 20rpx 0;
}
.prodList {
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 33.33%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
</style>